<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
<meta charset="utf-8" />
<title>审批申请贷款信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- basic styles -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->

<!-- page specific plugin styles -->

<!-- fonts -->

<!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />-->
<link rel="stylesheet" href="assets/css/css.css">

<!-- ace styles -->

<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

<!--[if lte IE 8]>
	<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->

<script src="assets/js/ace-extra.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>

<body>
	<!-- 头部 -->
	<div th:replace="after/common/header :: header"></div>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">

			<!--******************* Menu 菜单 **********************-->
			<a class="menu-toggler" id="menu-toggler" href="#"> <span
				class="menu-text"></span>
			</a>

			<!--******************* 菜单选项 ******************-->
			<div th:replace="after/common/nav :: navigation" class="sidebar"
				id="sidebar"></div>

			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try {
							ace.settings.check('breadcrumbs', 'fixed')
						} catch (e) {
						}
					</script>

					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
						<li>审批记录</li>
					</ul>

					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon"> <input type="text"
								placeholder="搜索" class="nav-search-input" id="nav-search-input"
								autocomplete="off" /> <i class="icon-search nav-search-icon"></i>
							</span>
						</form>
					</div>
				</div>
				<!--  ******************************  显示的标题  ******************************** -->
				<div class="page-content">
					<div class="page-header">
						<h1>
							审批申请贷款记录信息 <small> <i class="icon-double-angle-right"></i>
							</small>
						</h1>
					</div>
					<!-- /.page-header -->
					<!-- *******************************  主体部 ****************************** -->
					<div class="row">
						<div class="col-xs-12">
							<!--	*****************  审批 ********************-->
							<h4 class="pink"></h4>
							<div class="">
								<form action="#" class="form-search" id="form_submit_aproverwe">
									<div class="row">
										<div class="col-md-2 col-xs-12 col-sm-6">
											贷款申请人：<input type="text" placeholder="贷款申请人名称" id="custName"
												th:name="custName" />
										</div>
										<div class=" col-md-2 col-xs-12 col-sm-6">
											身份证号码：<input type="text" placeholder="请输入身份证号"
												id="custIDcardNo" th:name="custIDcardNo" />
										</div>
										<div class=" col-md-2 col-xs-12 col-sm-6">
											手 机 号 码： <input type="text" placeholder="请输入手机号码"
												id="custTele" th:name="custTele" />
										</div>
										<div class="col-md-2 col-xs-12 col-sm-6 text-center">
											<button type="button" class="btn btn-info btn-sm"
												id="btn_submit_look">
												<i class="icon-search"></i>查看
											</button>
											<button type="reset" class="btn btn-sm">
												<i class="icon-undo bigger-110"></i>重置
											</button>
										</div>
									</div>
								</form>
							</div>
							<div class="hr hr-18 dotted hr-double"></div>
							<div class="col-xs-12 col-sm-12">
								<div class="widget-box">
									<div class="widget-header">
										<h5 class="bigger lighter">
											<i class="icon-table"></i>
											<button class="btn btn-success btn-app btn-xs" th:id="all_brte"> 全 部 </button>
                                                <button th:id="stay" class="btn btn-info  btn-app btn-xs" value="待审批">待审批</button>
                                                <button th:id="already" class="btn btn-warning btn-app btn-xs" value="已审批">已审批</button>
                                                <button th:id="repulse" class="btn btn-danger btn-app btn-xs" value="审批打回">审批打回</button>
										</h5>
									</div>

									<div class="widget-body">
										<div class="widget-main no-padding">
											<table class="table table-hover">
												<thead class="thin-border-bottom">
													<tr>
														<th>审批编号</th>
														<th><i class="icon-level-down"></i>申请贷款编号</th>
														<th class="hidden-480"><i class="icon-user pink"></i>申请人名称</th>
														<th class="hidden-480"><i class="icon-credit-card orange2"></i>申请人身份证号</th>
														<th class="hidden-480"><i class="icon-ok-circle blue"></i>申请贷款类型</th>
														<th class="hidden-480"><i class="icon-money"></i>贷款金额</th>
														<th class="hidden-480"><i class="icon-adn red"></i>分期期数</th>
														<th class="hidden-480"><i class="icon-check green"></i>审查状态</th>
														<th class="hidden-480"><i class="icon-time infobox-blue2"></i>审查时间</th>
														<th class="hidden-480"><i class="icon-check-empty"></i>审查员</th>
														<th class="hidden-480"><i class="icon-external-link"></i>审批状态</th>
														<th class="hidden-480"><i class="icon-hand-right blue"></i>操作</th>
													</tr>
												</thead>
												<tbody th:id="aproveliste">
														
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /span
<!--   ***************** 审批分页 ********************-->
							<div class="modal-footer no-margin-top">
								<div class="col-sm-4 pull-right">
									<div class="dataTables_info text-center">
										<form class="" th:id="from_sem" action="">
											每页显示<label class="red" th:id="pageSize"></label>条，
											 共<label class="red" th:id="page"></label>页，
											到第<input type="text" class="psgen" style="width: 3rem;">页
											<input type="button" th:id="page_x" class="btn btn-xs btn-info" value="确定">
										</form>
									</div>
								</div>
								<ul class="pagination no-margin">
									<li th:id="firstprev">
										<a href="#"> 
											<i class="icon-double-angle-left"></i> 首页
										</a>
									</li>

									<li th:id="prev"><a href="#"> 上一页 </a></li>

									<li class="active"><a id="pageNum">1</a></li>

									<li class="next" th:id="next"><a href="#"> 下一页 </a></li>

									<li class="next" th:id="lastnext">
										<a href="#">
											 尾页<i class="icon-double-angle-right"></i>
										</a>
									</li>
								</ul>
							</div>
							<!--  ***************************   模态框   *****************************  -->
							<div id="modal-table" class="modal fade" tabindex="-1">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header no-padding">
											<div class="table-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-hidden="true">
													<span class="white">&times;</span>
												</button>
												进行审批信息
											</div>
										</div>

										<div class="hr hr-18 dotted hr-double"></div>

										<div class="modal-body no-padding">
										<input type="hidden" name="custName">
											<form action="#" id="form_Type">
												<input type="hidden" name="managerId" th:value="${session.manager.managerId}">
												<input type="hidden" name="approveId">
												
												<div class="checkbox">
													<label>
														<input id="Apple_Watch_one" name="managerType" type="checkbox" class="ace"  value="已审批"/>
														<span class="lbl"> 已审批</span>
													</label>
													<label>&nbsp;&nbsp;&nbsp;</label>
													<label>
														<input id="Apple_Watch_two" name="managerType" type="checkbox" class="ace"  value="审批打回"/>
														<span class="lbl"> 审批打回</span>
													</label>
												</div>
											</form>
										</div>
										<div class="hr hr-18 dotted hr-double"></div>

										<div class="modal-footer no-margin-top">
											<button class="btn btn-sm btn-success" th:id="Save_examina_approval">
												<i class="icon-save bigger-125"></i> 提交审批
											</button>
											<button class="btn btn-sm btn-danger" data-dismiss="modal">
												<i class="icon-remove"></i> 关闭返回
											</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal-dialog -->
							</div>
							<!-- PAGE CONTENT ENDS -->
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
			<!-- /.main-content -->
			<!--*********************  更换页面样式和布局 *******************-->
			<div th:replace="after/common/nav :: style"
				class="ace-settings-container" id="ace-settings-container"></div>
		</div>
		<!-- /.main-container-inner -->
		<!--**************  Top返回顶部 *****************-->
		<a href="#" id="btn-scroll-up" th:replace="after/common/nav :: top"
			class="btn-scroll-up btn btn-sm btn-inverse"></a>
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->
	<script type="text/javascript" src="assets/js/jquery.min.js"></script>
	<!-- <![endif]-->

	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
	<!--[if IE]>
			<script src="assets/js/jquery-1.10.2.min.js"></script>
		<![endif]-->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+ "<"+"/script>");
	</script>
	<!-- <![endif]-->

	<!--[if IE]>
	<script type="text/javascript">
		window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
	</script>
	<![endif]-->

	<script type="text/javascript">
		if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
	</script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/typeahead-bs2.min.js"></script>

	<!-- page specific plugin scripts -->
	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

	<!-- ace scripts -->
	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>

	<!-- 本页面的脚本 -->
	<script type="text/javascript">
		var pageNum;//定义当前页数
		var prePage;//定义上一页
		var nextPage;//定义下一页
		var lastPage;//定义尾页
		var managerType;//审批状态
		
		jQuery(function($) {
			
			//查看全部
			$("#all_brte").click(function(){
				list();
			});
			
			//查看待审批状态
			$("#stay").click(function(){
				managerType=document.getElementById("stay").value;
				list();
			});
			
			//查看已审批状态
			$("#already").click(function(){
				managerType=document.getElementById("already").value;
				list();
			});
			
			//查看审批打回状态
			$("#repulse").click(function(){
				managerType=document.getElementById("repulse").value;
				list();
			});
			
			
			$("#page_x").click(function(){
				pageNum=$("#from_sem").find(".psgen").val();
				list();
			});
			
			list();//页面加载时，调用显示数据
			
			//首页
			$('#firstprev').unbind('click').bind('click',function(){
				pageNum=1;
				list();//调用页面加载列表
			});
			//上一页
			$('#prev').unbind('click').bind('click',function(){
				pageNum=prePage;
				list();//调用页面加载列表
			});
			//下一页
			$('#next').unbind('click').bind('click',function(){
				pageNum=nextPage;
				list();//调用页面加载列表
			});
			//尾页
			$('#lastnext').unbind('click').bind('click',function(){
				pageNum=lastPage;
				list();//调用页面加载列表
			});
			
			var typeOne=document.getElementById("Apple_Watch_one");
			var typeTwo=document.getElementById("Apple_Watch_two");
			//已审批
			$("#Apple_Watch_one").on('click',function(){
				if(typeOne.checked == typeTwo.checked){
					$("#Apple_Watch_two").prop({checked:false}); //map键值对
				}
			});
			//审批打回
			$("#Apple_Watch_two").on('click',function(){
				if(typeOne.checked == typeTwo.checked){
					$("#Apple_Watch_one").prop({checked:false}); //map键值对
				}
			});
			
			//提交业务员的审批信息
			$("#Save_examina_approval").click(function(){
				
				if(typeOne.checked==false && typeTwo.checked==false){
					alert("请勾选您的审批意见");
				}else{
					rovep();
				}
			});
			
		})
		
		
		//加载页面列表数据
		function list(){
			var custName=$("#custName").val(); 
			var custIDcardNo=$("#custIDcardNo").val();
			var custTele=$("#custTele").val();
			$.ajax({
				type : "POST", //请求方式
				url : "/approvelist",    //请求的url地址
				data : {'loanapplication.custName':custName,
						'loanapplication.custIDcardNo':custIDcardNo,
						'loanapplication.custTele':custTele,
						'managerType':managerType,
						'pageNum':pageNum},    //参数值
			    dataType : "json",   //返回格式为json
			    success:function(data){	//请求成功时处理
			    	//清空 <tbody> 标签里面的所有内容
			    	$("#aproveliste").html("");
			       if(data.aprove.length == 0){
			    		$("#aproveliste").prepend(
								"<tr class='trer'>" + 
									"<td class='center red text-center' colspan='12'>没有数据</td>"+
								"</tr>");
			    	}
					for (var i = 0; i < data.aprove.length; i++) {
						$("#aproveliste").prepend(
							"<tr class='rove_"+data.aprove[i].approveId+"'>" +
								"<td class='approveId'>"+data.aprove[i].approveId+"</td>" +
								"<td class='custId'><span>ID8827-560700"+data.aprove[i].loanapplication.customer.custId+"</span></td>" +
								"<td class='custName'>"+data.aprove[i].loanapplication.customer.custName+"</td>" +
								"<td class='custIDcardNo'>"+data.aprove[i].loanapplication.customer.custIDcardNo+"</td>" +
								"<td class='purposeId'>"+data.aprove[i].loanapplication.purposeId+"</td>" +
								"<td class='loanQuota'>"+data.aprove[i].loanapplication.loanQuota+"</td>" +
								"<td class='loanStagId'>"+data.aprove[i].loanapplication.loanStagId+"期</td>" +
								"<td class='checkType'>"+data.aprove[i].checkType+"</td>" +
								"<td class='checkDate'>"+data.aprove[i].checkDate+"</td>" +
								"<td class=''>"+data.aprove[i].checkId+"</td>" +
								"<td class='managerType'>"+data.aprove[i].managerType+"</td>" +
								"<td>" +
									"<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons' >" +
										"<a class='blue' href='#modal-table' data-toggle='modal' value='"+data.aprove[i].approveId+"' onclick='apecte("+data.aprove[i].approveId+")' id='apprvoeshow'>" +
											"<i class='icon-edit bigger-130'></i>" +
										"</a>" +
									"</div>" +
									"<div class='visible-xs visible-sm hidden-md hidden-lg'>" +
										"<div class='inline position-relative'>" +
											"<button class='btn btn-minier btn-yellow dropdown-toggle' data-toggle='dropdown'>" +
												"<i class='icon-caret-down icon-only bigger-120'></i>" +
											"</button>" +
											"<ul class='dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close'>" +
												"<li>" +
													"<a href='#' class='tooltip-success' id='approves_show_modal' data-rel='tooltip' title='Edit' value='"+data.aprove[i].approveId+"'>" +
														"<span class='green'> " +
															"<i class='icon-edit bigger-120'></i>" +
														"</span>" +
													"</a>" +
												"</li>" +
											"</ul>" +
										"</div>" +
									"</div>" +
								"</td>" +
							"</tr>"); 
					}
					
					//分页操作

			    	//总页数
			    	var getPages= data.pageinfo.pages;
			    	//每页显示条数
			    	var getPageSize=data.pageinfo.pageSize;
			    	//获取当前页信息
			    	pageNum=data.pageinfo.pageNum;
			    	nextPage=data.pageinfo.nextPage;
			    	prePage=data.pageinfo.prePage;
			    	lastPage=data.pageinfo.lastPage;
					$("#page").html(getPages);
					$("#pageSize").html(getPageSize);
					$("#pageNum").html(pageNum);
					if(pageNum==1){
						$(".no-margin").find("#firstprev").attr("class","disabled");
						$(".no-margin").find("#prev").attr("class","disabled");
					}else{
						$(".no-margin").find("#firstprev").attr("class","");
						$(".no-margin").find("#prev").attr("class",""); 
					}
			    },error:function(data){
			    	alert("请求错误，无法加载数据");
			    }
			    
			});
			
		}
		
		//业务审批 审批
		function rovep(){
			var typeOne=document.getElementById("Apple_Watch_one");
			var typeTwo=document.getElementById("Apple_Watch_two");
			var custName=$("[name='custName']").val();
			if(confirm("确定要提交您的审查过的数据吗?")){
				var formData=new FormData(document.querySelector("#form_Type"));
				var  keys=formData.keys(); 
				var key; 
				while(!(key=keys.next()).done){
				 	 console.log(key.value); 
					 console.log(formData.get(key.value)); 
				}
				$.ajax({
					type : "POST", //请求方式
					url : "/approveupdate",    //请求的url地址
					data : formData,		   //参数值
					async : false,
					clearForm : true,
					clearForm : true,
					contentType : false,
					processData : false,
				    dataType : "json",   //返回格式为json
				    success:function(data){	//请求成功时处理
				    	debugger;
				    	if(data.roveup == true){
				    		if(typeOne.checked){
				    			alert("您已成功审批【"+custName+"】的贷款申请信息，通过了审批");
				    			window.location.reload();
				    		}else if(typeTwo.checked){
				    			alert("【"+custName+"】的贷款申请信息被您审批打回");
				    			window.location.reload();
				    		}
				    	}else if(data.roveup == false){
				    		alert("对不起，审批失败");
				    	}
				    },
				    error : function(data){
				    	alert("无法请求，出现错误");
				    }
				});
			}		

		}
		
		//点击弹框传值
		function apecte(id){
			var tr=$(".rove_"+id);
			//审批编号
			var approveId=$(tr).find(".approveId").html();
			$("#form_Type").find("[name='approveId']").val(approveId);
			//客户名称
			var custName=$(tr).find(".custName").html();
			$("[name='custName']").val(custName);
		}
	</script>
	<script type="text/javascript" th:src="@{assets/js/loaned/approve.js}"></script>
</body>
</html>
